<template>
  <div class="login_container">
      <div class="login_box">
          <div class="box_trans">
              <img src="../../assets/logo_index.png"/>
              <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
             <el-form-item prop="phone">
                   <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
                       <i slot="prefix" class="el-input__icon el-icon-search"></i>
                   </el-input>
             </el-form-item>
              <el-form-item prop="code">
                   <el-input v-model="loginForm.code" placeholder="请输入验证码">
                       <i slot="prefix" class="el-input__icon el-icon-star-on"></i>
                   </el-input>
             </el-form-item>
             <el-form-item>
                 <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
                 <span>我已阅读并同意用户协议和隐私条款</span>
             </el-form-item>
             <el-form-item >
                 <el-button type="primary" style="width:100%" @click="login()" v-loading="btnLoading">登录</el-button>
             </el-form-item>
     </el-form>
          </div>
      </div>
  </div>
</template>

<script>
// import {userLogin,checkUser}  from '@/api/request'
export default {
name:"login",
data(){
    // 自定义校验规则
    let checkMobile = (rule,value,callback) =>{
        // rule：自定义校验规则
        // value 要校验的数据
        // callback回调函数，无论校验是否成功都要调用
        let reg = /^1[356789]\d{9}$/
        if(!reg.test(value)){
            return callback(new Error('手机号码格式不正确'))
        }
        callback()
    }
    // 是否勾选同意协议
    let checkXieYI = (rule,value,callback) => {
        if(!Number(value) === 0){
            return callback(new Error('请勾选同意协议'))
        }
        callback()
    }
    return{
        loginForm:{
            mobile:'13844145535',
            code:'',
            xieyi:true,
            btnLoading:false,
            catpchaObject:null
        },
        // 表单校验规则
        rules:{
              mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            {validator:checkMobile,trigger:'blur'}
           
          ],
          code:[
             { required: true, message: '请输入验证码', trigger: 'blur' },           

          ],
          xieyi:[
              {validator:checkXieYI}
          ]
        }
    }
},
methods:{
    login(){    
          //  判断以前是否生成过 人机窗口  有的话就直接打开
      if (this.capachaObject) {
        return this.capachaObject.verify()
      }
        // 点击按钮
        this.btnLoading = true
        this.$refs.loginFormRef.validate( valid => {     
            if(valid){  // 验证通过
         // 人机交互验证
         // 1)  获得验证的秘钥信息
        // 点击登录按钮时再次进行校验
                     let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
                      pro
            .then((result) => {
              // console.log(result)
              // 从result中把相关的信息解构出来
              let { data } = result.data
              // 显示人机窗口
                            window.initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind' // 隐藏"人机按钮"
              }, captchaObj => {
                // 这里可以调用验证实例 captchaObj 的实例方法
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法“显示验证码”
                  captchaObj.verify() // 显示验证码
                  // 关闭按钮等待效果
                  this.btnLoading = false
                }).onSuccess(() => {
                  // 人机验证成功
                  // 验证账号登录系统
                  this.loginAct()
                }).onError(() => {
                  // 人机验证失败
                })
              })
            })
            .catch((err) => {
              console.log(err)
              return this.$message.error('获得人机验证码失败！')
            })
            
            // this.loginAct()
            }
        })
        
    },
    // 真正的登录动作
      // 校验账号正确，存储token等信息，登录后台系统
    loginAct () {
      // axios发送请求带着用户输入的账号密码 去服务器校验
      //  axios调用任何方法请求数据，返回的都是Promise对象。这样就可以继续调用then、catch方法了
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then((result) => {
          // 账号校验成功后，会把当前账号的许多信息给我们返回
          // console.log(result) // id  name  photo  token等
          var { name, token, photo } = result.data.data // 对象解构赋值
          window.sessionStorage.setItem('token', token)
          // 借助vuex实现 数据的存储（更新）
          this.$store.commit('upName', name)
          this.$store.commit('upPhoto', photo)
          // window.sessionStorage.setItem('name', name)
          // window.sessionStorage.setItem('token', token)

          // 路由编程导航
          this.$router.push({ name: 'home' })
        })
        .catch((err) => {
          console.log(err)
          return this.$message.error('用户名或密码错误！')
        })
    }
}
}
</script>

<style lang="less" scoped>
.login_container{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
    background-color: gray;
    .login_box{
        display: flex;
        justify-content: center;
        width:410px;
        height:345px;
        background-color: #fff;
      .box_trans{
          width:75%;
          margin-top: 30px;
      }
    }
}
</style>